<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel='stylesheet' href='https://cdn.staticfile.org/spectre.css/0.5.8/spectre.min.css'>

    <link rel='stylesheet' href='https://cdn.staticfile.org/font-awesome/5.11.2/css/all.min.css'>
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@v2.0.0/dist/jsoneditor.min.js"></script>
    <script src="https://cdn.staticfile.org/swig/1.4.2/swig.min.js"></script>
    <script>
        (function ($, h, c) {
            var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize",
                d = j + "-special-event", b = "delay", f = "throttleWindow";
            e[b] = 250;
            e[f] = true;
            $.event.special[j] = {
                setup: function () {
                    if (!e[f] && this[k]) {
                        return false
                    }
                    var l = $(this);
                    a = a.add(l);
                    $.data(this, d, {w: l.width(), h: l.height()});
                    if (a.length === 1) {
                        g()
                    }
                }, teardown: function () {
                    if (!e[f] && this[k]) {
                        return false
                    }
                    var l = $(this);
                    a = a.not(l);
                    l.removeData(d);
                    if (!a.length) {
                        clearTimeout(i)
                    }
                }, add: function (l) {
                    if (!e[f] && this[k]) {
                        return false
                    }
                    var n;

                    function m(s, o, p) {
                        var q = $(this), r = $.data(this, d);
                        r.w = o !== c ? o : q.width();
                        r.h = p !== c ? p : q.height();
                        n.apply(this, arguments)
                    }

                    if ($.isFunction(l)) {
                        n = l;
                        return m
                    } else {
                        n = l.handler;
                        l.handler = m
                    }
                }
            };

            function g() {
                i = h[k](function () {
                    a.each(function () {
                        var n = $(this), m = n.width(), l = n.height(), o = $.data(this, d);
                        if (m !== o.w || l !== o.h) {
                            n.trigger(j, [o.w = m, o.h = l])
                        }
                    });
                    g()
                }, e[b])
            }
        })(jQuery, this);
    </script>
</head>
<body>
<div id="editor_holder"></div>
<script>
    JSONEditor.defaults.options.theme = 'spectre';
    JSONEditor.defaults.options.iconlib = 'fontawesome5';
    JSONEditor.defaults.options.template = 'swig';

    $("#editor_holder").resize(function () {
        parent.onHeightChange($('#editor_holder').height());
    });
    var o ={{ schema |safe}};
    var editor = new JSONEditor(document.getElementById('editor_holder'), o);
    editor.setValue({{ value |safe}});

    editor.on('change', function () {
        parent.onConfigChange(JSON.stringify(editor.getValue()));
    });
</script>
{% if script %}
    <script>
        {{ script|safe }}
    </script>
{% endif %}
</body>
</html>
